<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">报警事故记录(前后10s)<p th:text="${alramAllInfo.createTime}"></p></h4>
</div>

<div class="modal-body">

    <input hidden id="alarmName" th:value="${alramAllInfo.equipmentId}">
    <input hidden id="date" th:value="${alramAllInfo.createTime}">

    <div id="SOC" style="width: 800px;height:300px;">

    </div>

    <div id="voltage" style="width: 800px;height:300px;">

    </div>

    <div id="electricity" style="width: 800px;height:300px;">

    </div>

</div>
<style>
    .modal-dialog {
        width: 800px;
        height: 400px;
    }
</style>

<script>

    $(function () {
        var soc = echarts.init(document.getElementById('SOC'));
        soc.setOption({
            tooltip: {              // 提示框组件
                trigger: 'axis'     // 触发类型 axis坐标轴触发
            },
            title: {
                left: 'center',
                text: 'soc'
            },
            xAxis: {                // x轴
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis:
                {
                    type: 'category',
                    splitLine: {    //不显示坐标辅助线
                        show: false
                    },
                    name: 'SOC',
                    type: 'value',

                },
            series: [
                {
                    name: 'SOC',
                    type: 'line',
                    // yAxisIndex: 1,  //使用第二个Y轴
                    data: []
                }
            ]
        });
        //soc.showLoading();
        $.post("/alarm/alram_soc", {
            id: $("#alarmName").val(),
            time: $("#date").val()
        }, function (map) {
            console.log(map)
            if (!map.jsonObject) {
                soc.clear();
                return false;
            }
            if (map.jsonObject != null) {
                soc.setOption({
                    xAxis: {
                        data: Object.keys(map.jsonObject)
                    },
                    series: [
                        {
                            data: Object.keys(map.jsonObject).sort().map(function (key) {
                                return map.jsonObject[key];
                            })
                        }]
                });
            }
        })

        //总电压
        var voltage = echarts.init(document.getElementById('voltage'));
        voltage.setOption({
            tooltip: {              // 提示框组件
                trigger: 'axis'     // 触发类型 axis坐标轴触发
            },
            title: {
                left: 'center',
                text: '总电压'
            },
            xAxis: {                // x轴
                type: 'category',
                boundaryGap: false,  //坐标轴两边留白
                data: []
            },
            yAxis:
                {
                    type: 'category',
                    splitLine: {    //不显示坐标辅助线
                        show: false
                    },
                    name: '总电压',
                    type: 'value',

                },
            series: [
                {
                    name: '总电压',
                    type: 'line',
                    // yAxisIndex: 1,  //使用第二个Y轴
                    data: []
                }
            ]
        });
        //soc.showLoading();
        $.post("/alarm/alram_battery", {id: $("#alarmName").val(), time: $("#date").val()}, function (map) {

            if (!map.jsonBattery) {
                voltage.clear();
                return false;
            }
            if (map.jsonBattery != null) {
                voltage.setOption({
                    xAxis: {
                        data: Object.keys(map.jsonBattery)
                    },
                    series: [
                        {
                            data: Object.keys(map.jsonBattery).sort().map(function (key) {
                                return map.jsonBattery[key];
                            })
                        }]
                });
            }
        });
        //电流
        var electricity = echarts.init(document.getElementById('electricity'));

        electricity.setOption({
            tooltip: {              // 提示框组件
                trigger: 'axis'     // 触发类型 axis坐标轴触发
            },
            title: {
                left: 'center',
                text: '电流'
            },
            xAxis: {                // x轴
                type: 'category',
                boundaryGap: false,  //坐标轴两边留白
                data: []
            },
            yAxis:
                {
                    type: 'category',
                    splitLine: {    //不显示坐标辅助线
                        show: false
                    },
                    name: '电流',
                    type: 'value',

                },
            series: [
                {
                    name: '电流',
                    type: 'line',
                    // yAxisIndex: 1,  //使用第二个Y轴
                    data: []
                }
            ]
        });
        $.post("/alarm/alram_electricity", {id: $("#alarmName").val(), time: $("#date").val()}, function (map) {

            if (!map.jsonElectricity) {
                electricity.clear();
                return false;
            }
            if (map.jsonElectricity != null) {
                electricity.setOption({
                    xAxis: {
                        data: Object.keys(map.jsonElectricity)
                    },
                    series: [
                        {
                            data: Object.keys(map.jsonElectricity).sort().map(function (key) {
                                return map.jsonElectricity[key];
                            })
                        }]
                });
            }
        });
    });

</script>
